<script setup>

// 导入vue的生命周期的钩子函数
import {onMounted} from 'vue'

// 导入pinia数据

import  {defineSchedule} from '../store/scheduleStore'
import  {defineUser} from '../store/userStore'
let schedule = defineSchedule();
let user = defineUser()

// 导入axios的副本
import request from '../utils/request'



// 向服务端发送请求,获取当前登录的用户的所有日程信息
let showSchedule = async()=>{
    //let {data} =await request.get(`/schedule/findAllSchedule`,{params:{uid:user.uid}})
    let {data} =await request.get(`/schedule/findAllSchedule?uid=${user.uid}`)
    schedule.itemList=data.data.itemList
}




onMounted(()=>{
    showSchedule()
})


// 增加默认日程的方法
let  addSchedule = async ()=>{
    // 向后端发送请求,为当前用户增加一条空数据
    let {data}= await request.get(`/schedule/addDefaultSchedule?uid=${user.uid}`)
    /* if(data.code = "200"){
        alert("增加成功")
    } */
    // 页面数据重新加载

    showSchedule() 
}


let updateSchedule = async (index)=>{
    let scheduleItem =schedule.itemList[index]
    // 向 服务器发送更新请求
    let {data}= await request.post("/schedule/updateSchedule",scheduleItem)
    if(data.code=="200"){
        alert("更新成功")
    }

    // 刷新页面数据
    showSchedule()

}


let removeSchedule = async(sid,title)=>{
    // 弹窗提示是否删除
    if(confirm(`确定要"${title}"删除吗?`)){
        //发送请求 删除日程
        let{data}=await request.get(`/schedule/removeSchedule?sid=${sid}`)
        if(data.code == "200"){
            alert("删除成功")
        }
        // 刷新页面
        showSchedule()
    }



}






</script>
<template>
  <div>
    <h3 class="ht">您的日程如下</h3>
    <table class="tab" cellspacing="0px">
        <tr class="ltr">
            <th>编号</th>
            <th>内容</th>
            <th>进度</th>
            <th>操作</th>
        </tr>
        <tr class="ltr" v-for="item,index in schedule.itemList" :key="index">
            <td v-text="index+1" class="buttonContainer"></td>
            <td>
                <input type="text" v-model="item.title" >
            </td>
            <td>
                   <input type="radio" value="1" v-model="item.completed"> 已完成 
                   <input type="radio" value="0" v-model="item.completed"> 未完成 
            </td>
            <td class="buttonContainer">
                <button class="btn1" @click="removeSchedule(item.sid,item.title)">删除</button>
                <button class="btn1" @click="updateSchedule(index)"  >保存修改</button>
            </td>
        </tr>
        <tr class="ltr buttonContainer" >
            <td colspan="4">
                <button class="btn1" @click="addSchedule()">新增日程</button>
            </td>
        </tr>
    </table>
  </div>
</template>
<style scoped>
      .ht{
            text-align: center;
            color: cadetblue;
            font-family: 幼圆;
        }
        .tab{
            width: 80%;
            border: 5px solid cadetblue;
            margin: 0px auto;
            border-radius: 5px;
            font-family: 幼圆;
        }
        .ltr td{
            border: 1px solid  powderblue;
        }
        .ipt{
            border: 0px;
            width: 50%;
        }
        .btn1{
            border: 2px solid powderblue;
            border-radius: 4px;
            width:100px;
            background-color: antiquewhite;
        }
        #usernameMsg , #userPwdMsg {
            color: gold;
        }
        .buttonContainer{
            text-align: center;
        }
</style>